export const graphConfig = [
  {
    id: 'circle',
    title: '圆形',
    draggable: true,
    props: {
      className: 'TopologyEditor-graph TopologyEditor-circle',
    },
  },
  {
    id: 'rect',
    title: '长方形',
    draggable: true,
    props: {
      className: 'TopologyEditor-graph TopologyEditor-rect',
    },
  },
  {
    id: 'image',
    title: '交换机',
    draggable: true,
    img: 'https://gongxufan.github.io/web-topology/icon/tpIcon_5.png',
    props: {
      className: 'TopologyEditor-graph',
    },
  },
]

export const data = {
  // 点集
  nodes: [
    {
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      x: 100, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
      label: 'node1',
    },
    {
      id: 'node2', // String，该节点存在则必须，节点的唯一标识
      x: 300, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
      label: 'node2',
    },
  ],
  // 边集
  edges: [
    {
      source: 'node1', // String，必须，起始点 id
      target: 'node2', // String，必须，目标点 id
    },
  ],
}
const dom = document.querySelector('#TopologyEditor-center') || 0
export const GraphConfig = {
  container: 'TopologyEditor-center', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  // eslint-disable-next-line radix
  width: parseInt(
    dom &&
      window.getComputedStyle(document.querySelector('#TopologyEditor-center'))
        .width
  ), // Number，必须，图的宽度
  // eslint-disable-next-line radix
  height: parseInt(
    dom &&
      window.getComputedStyle(document.querySelector('#TopologyEditor-center'))
        .height
  ), // Number，必须，图的高度
  modes: {
    default: [
      'drag-canvas',
      'zoom-canvas',
      {
        type: 'drag-node',
        enableDelegate: false,
        shouldBegin: (e) => {
          return true
        },
      },
    ],
  },
  defaultNode: {
    size: 50,
  },
  nodeStateStyles: {
    click: {
      shadowBlur: 10,
      shadowColor: 'red',
    },
  },
  edgeStateStyles: {
    hover: {
      stroke: 'steelblue',
      lineWidth: 3,
    },
  },
}
